<template>
  <div>
    <Table :data="lists"
      border
      ref="multipleTable"
      style="width: 100%"
      :columns="columns"
      @on-selection-change="handleSelectionChange"
      :no-data-text="emptySlot">
    </Table>

    <Row style="margin-top: 20px">
      <Col span="7">
      <Button size="small"
        class="mrgr_10">批量发货</Button>
      <Button size="small"
        class="mrgr_10">批量标记</Button>
      <Button size="small"
        class="mrgr_10">批量免运费</Button>
      </Col>
      <Col style="float:right;">
      <Page :total="10">
      </Page>
      </Col>

    </Row>
  </div>
</template>
<script>
import noDataPic from '@/assets/images/T1MQ1cXhtiXXXXXXXX-78-120.png'
export default {
  props: {
    lists: {
      type: Array
    }
  },
  data() {
    return {
      multipleSelection: [],
      emptySlot: ` <div class="empty_container">
        <img src="${noDataPic}"
          style="margin-right:24px;vertical-align:middle;" />
        <span>没有符合条件的宝贝，请尝试其他搜索条件。</span>
      </div>`,
      columns: [
        {
          type: 'selection',
          width: 55
        },
        {
          title: '宝贝',
          key: 'prop1',
          width: 180
        },
        {
          title: '单价',
          key: 'prop2',
          width: 180
        },
        {
          title: '数量',
          key: 'prop3'
        },
        {
          title: '售后',
          key: 'prop4'
        },
        {
          title: '买家',
          key: 'prop5'
        },
        {
          title: '交易状态',
          key: 'prop6'
        },
        {
          title: '实收款',
          key: 'prop7'
        },
        {
          title: '评价',
          key: 'prop8'
        }
      ]
    }
  },
  methods: {
    handleSelectionChange(val) {
      this.multipleSelection = val
    }
  }
}
</script>
<style lang="scss" scoped>
</style>
